<template>
  <div class="page-main">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header> 退出率统计</template>

          <charts-line :lineData="state.lineData" :line_x="state.line_x"></charts-line>
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02日间手术退出率</span
      >
      <el-divider/>
      <el-col :span="24">
        <el-table :data="tableData" :summary-method="getSummaries"
                  show-summary style="width: 100%">
          <el-table-column prop="date" label="统计日期"/>
          <el-table-column prop="value_1" label="入院前取消率"/>
          <el-table-column prop="value_2" label="术后退出率"/>
          <el-table-column prop="value_3" label="患者爽约率">
            <template #default="scope">
              <span>{{ scope.row.value_3 }}%</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>


<script setup name="appointmentsAll">
import chartsLine from '/@/components/charts/line.vue';

const tableData = ref([
  {
    date: '2023-01-31',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-01',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-02',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-03',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-04',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-05',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-06',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-07',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-08',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-09',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-10',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-11',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-12',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-13',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },
  {
    date: '2023-02-14',
    value_1: 120,
    value_2: 132,
    value_3: '5'
  },]
);
const state = reactive({
  lineData: [
    {
      name: '数据1',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
  ],
  showData: [
    {date: '2023-01-31', value: 120},
    {date: '2023-02-01', value: 132},
    {date: '2023-02-02', value: 101},
    {date: '2023-02-03', value: 134},
    {date: '2023-02-04', value: 90},
    {date: '2023-02-05', value: 230},
    {date: '2023-02-06', value: 210},
    {date: '2023-02-07', value: 120},
    {date: '2023-02-08', value: 132},
    {date: '2023-02-09', value: 101},
    {date: '2023-02-10', value: 134},
    {date: '2023-02-11', value: 90},
    {date: '2023-02-12', value: 230},
    {date: '2023-02-13', value: 210},
    {date: '2023-02-14', value: 120},
    {date: '2023-02-15', value: 20},

  ],
  line_x: ['2023-01-31', '2023-02-01', '2023-02-02', '2023-02-03', '2023-02-04', '2023-02-05', '2023-02-06', '2023-02-07', '2023-02-08', '2023-02-12'],
})

const getSummaries = (param) => {
  const {columns, data} = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '区间统计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}%`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}
</script>

<style lang="scss" scoped>
:deep() .el-descriptions__title {
  text-align: center;
  width: 100%;
  margin-top: 30px;
}

.margin-top {
  border: 1px solid #ebeef5;
}

.export-button {
  position: absolute;
  right: 30%;
  top: 30px;
}

.title-span {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}

</style>
